<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>Flex弹性布局</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>

            <div class="d-flex p-3 bg-secondary text-white">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 显示在同一行 -->
            <br><br>
            <div class="d-inline-flex p-3 bg-secondary text-white">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 水平方向 -->
            <br><br>
            <div class="d-flex flex-row bg-secondary">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 水平方向靠右对齐 -->
            <br><br>
            <div class="d-flex flex-row-reverse bg-secondary">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 水平方向靠左 -->
            <br><br>
            <div class="d-flex justify-content-start bg-secondary mb-3">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <!-- 水平方向靠右 -->
            <div class="d-flex justify-content-end bg-secondary mb-3">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <!-- 水平方向居中 -->
            <div class="d-flex justify-content-center bg-secondary mb-3">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <!-- 水平方向从头开始均匀发布 -->
            <div class="d-flex justify-content-between bg-secondary mb-3">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <!-- 水平方向开头留一部分空隙或均匀分布 -->
            <div class="d-flex justify-content-around bg-secondary mb-3">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 设置等宽 -->
            <div class="d-flex">
                  <div class="p-2 bg-info flex-fill">Flex item 1</div>
                  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
                  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
            </div>

            <br><br>
            <div class="d-flex">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
            </div>

            <!-- 垂直方向 -->
            <br><br>
            <div class="d-flex flex-column">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 垂直方向 -->
            <br><br>
            <div class="d-flex flex-column-reverse">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>

            <!-- 排序 -->
            <br><br>
            <div class="d-flex bg-secondary">
                  <div class="p-2 bg-info order-3">Flex item 1</div>
                  <div class="p-2 bg-warning order-2">Flex item 2</div>
                  <div class="p-2 bg-primary order-1">Flex item 3</div>
            </div>

            <!-- 外边距 -->
            <br><br>
            <div class="d-flex">
                  <div class="p-2 mr-auto bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 ml-auto bg-primary">Flex item 3</div>
            </div>

            <br>
            <!-- 包裹 -->
            <div class="d-flex flex-wrap align-content-start bg-light" style="height: 300px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
                  <div class="p-2 border">Flex item 4</div>
                  <div class="p-2 border">Flex item 5</div>
                  <div class="p-2 border">Flex item 6</div>
                  <div class="p-2 border">Flex item 7</div>
                  <div class="p-2 border">Flex item 8</div>
                  <div class="p-2 border">Flex item 9</div>
                  <div class="p-2 border">Flex item 10</div>
                  <div class="p-2 border">Flex item 11</div>
                  <div class="p-2 border">Flex item 12</div>
                  <div class="p-2 border">Flex item 13</div>
                  <div class="p-2 border">Flex item 14</div>
                  <div class="p-2 border">Flex item 15</div>
                  <div class="p-2 border">Flex item 16</div>
                  <div class="p-2 border">Flex item 17</div>
                  <div class="p-2 border">Flex item 18</div>
                  <div class="p-2 border">Flex item 19</div>
                  <div class="p-2 border">Flex item 20</div>
                  <div class="p-2 border">Flex item 21</div>
                  <div class="p-2 border">Flex item 22</div>
                  <div class="p-2 border">Flex item 23</div>
                  <div class="p-2 border">Flex item 24</div>
                  <div class="p-2 border">Flex item 25</div>
            </div>
            <br>
            <div class="d-flex flex-wrap align-content-end bg-light" style="height: 300px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
                  <div class="p-2 border">Flex item 4</div>
                  <div class="p-2 border">Flex item 5</div>
                  <div class="p-2 border">Flex item 6</div>
                  <div class="p-2 border">Flex item 7</div>
                  <div class="p-2 border">Flex item 8</div>
                  <div class="p-2 border">Flex item 9</div>
                  <div class="p-2 border">Flex item 10</div>
                  <div class="p-2 border">Flex item 11</div>
                  <div class="p-2 border">Flex item 12</div>
                  <div class="p-2 border">Flex item 13</div>
                  <div class="p-2 border">Flex item 14</div>
                  <div class="p-2 border">Flex item 15</div>
                  <div class="p-2 border">Flex item 16</div>
                  <div class="p-2 border">Flex item 17</div>
                  <div class="p-2 border">Flex item 18</div>
                  <div class="p-2 border">Flex item 19</div>
                  <div class="p-2 border">Flex item 20</div>
                  <div class="p-2 border">Flex item 21</div>
                  <div class="p-2 border">Flex item 22</div>
                  <div class="p-2 border">Flex item 23</div>
                  <div class="p-2 border">Flex item 24</div>
                  <div class="p-2 border">Flex item 25</div>
            </div>
            <br>
            <div class="d-flex flex-wrap align-content-around bg-light" style="height: 300px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
                  <div class="p-2 border">Flex item 4</div>
                  <div class="p-2 border">Flex item 5</div>
                  <div class="p-2 border">Flex item 6</div>
                  <div class="p-2 border">Flex item 7</div>
                  <div class="p-2 border">Flex item 8</div>
                  <div class="p-2 border">Flex item 9</div>
                  <div class="p-2 border">Flex item 10</div>
                  <div class="p-2 border">Flex item 11</div>
                  <div class="p-2 border">Flex item 12</div>
                  <div class="p-2 border">Flex item 13</div>
                  <div class="p-2 border">Flex item 14</div>
                  <div class="p-2 border">Flex item 15</div>
                  <div class="p-2 border">Flex item 16</div>
                  <div class="p-2 border">Flex item 17</div>
                  <div class="p-2 border">Flex item 18</div>
                  <div class="p-2 border">Flex item 19</div>
                  <div class="p-2 border">Flex item 20</div>
                  <div class="p-2 border">Flex item 21</div>
                  <div class="p-2 border">Flex item 22</div>
                  <div class="p-2 border">Flex item 23</div>
                  <div class="p-2 border">Flex item 24</div>
                  <div class="p-2 border">Flex item 25</div>
            </div>
            <br>
            <div class="d-flex flex-wrap align-content-stretch bg-light" style="height: 300px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
                  <div class="p-2 border">Flex item 4</div>
                  <div class="p-2 border">Flex item 5</div>
                  <div class="p-2 border">Flex item 6</div>
                  <div class="p-2 border">Flex item 7</div>
                  <div class="p-2 border">Flex item 8</div>
                  <div class="p-2 border">Flex item 9</div>
                  <div class="p-2 border">Flex item 10</div>
                  <div class="p-2 border">Flex item 11</div>
                  <div class="p-2 border">Flex item 12</div>
                  <div class="p-2 border">Flex item 13</div>
                  <div class="p-2 border">Flex item 14</div>
                  <div class="p-2 border">Flex item 15</div>
                  <div class="p-2 border">Flex item 16</div>
                  <div class="p-2 border">Flex item 17</div>
                  <div class="p-2 border">Flex item 18</div>
                  <div class="p-2 border">Flex item 19</div>
                  <div class="p-2 border">Flex item 20</div>
                  <div class="p-2 border">Flex item 21</div>
                  <div class="p-2 border">Flex item 22</div>
                  <div class="p-2 border">Flex item 23</div>
                  <div class="p-2 border">Flex item 24</div>
                  <div class="p-2 border">Flex item 25</div>
            </div>
            <!-- 全部子元素对齐 -->
            <br>
            <div class="d-flex align-items-start bg-light" style="height: 150px;">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex align-items-end bg-light" style="height: 150px;">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex align-items-baseline bg-light" style="height: 150px;">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex align-items-stretch bg-light" style="height: 150px;">
                  <div class="p-2 bg-info">Flex item 1</div>
                  <div class="p-2 bg-warning">Flex item 2</div>
                  <div class="p-2 bg-primary">Flex item 3</div>
            </div>
            <!-- 指定子元素对齐 -->
            <br>
            <div class="d-flex bg-light" style="height: 150px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border align-self-start">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex bg-light" style="height: 150px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border align-self-end">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex bg-light" style="height: 150px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border align-self-center">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex bg-light" style="height: 150px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border align-self-baseline">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
            </div>
            <br>
            <div class="d-flex bg-light" style="height: 150px;">
                  <div class="p-2 border">Flex item 1</div>
                  <div class="p-2 border align-self-stretch">Flex item 2</div>
                  <div class="p-2 border">Flex item 3</div>
            </div>
      </body>
</html>